<template>
  <Row>
    <Row>
      <Menu mode="horizontal" active-name="2" @on-select="route">
        <MenuItem name="DeptList">
          <Icon type="ios-paper"/>部门管理
        </MenuItem>
        <MenuItem name="UserList">
          <Icon type="ios-people"/>用户管理
        </MenuItem>
        <Button
          icon="ios-download-outline"
          type="primary"
          style="float:right; margin:10px"
          @click="logout"
        >登出</Button>
      </Menu>
    </Row>
    <Row>
      <Col span="16" offset="4">
        <Button
          icon="ios-download-outline"
          type="primary"
          style="float:left; margin:10px"
          @click="add"
        >添加</Button>
      </Col>
    </Row>
    <Row>
      <Col span="16" offset="4">
        <Table border :columns="columns7" :data="data6"></Table>
      </Col>
    </Row>
  </Row>
</template>
<script>
/* eslint-disable */
import userService from "@/service/userService";
import deptService from "@/service/deptService";
import { resolve } from "url";

export default {
  data() {
    return {
      depts: [],
      columns7: [
        {
          title: "用户名",
          key: "username"
        },
        {
          title: "姓名",
          key: "realName"
        },
        {
          title: "部门",
          key: "dept",
          render: (h, params) => {
            let deptName = "";
            this.depts.forEach(dept => {
              if (dept.deptId == params.row.deptId) {
                deptName = dept.deptName;
              }
            });

            return h("div", [h("p", deptName)]);
          }
        },
        {
          title: "角色",
          key: "role",
          render: (h, params) => {
            return h("div", [
              h("p", params.row.role == 1 ? "管理员" : (params.row.role == 2 ? "普通用户" : ""))
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 210,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.confirm(params);
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.resetPwd(params);
                    }
                  }
                },
                "重置密码"
              )
            ]);
          }
        }
      ],
      data6: [],
      pwdValue: ""
    };
  },
  methods: {
    confirm(params) {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>是否确认删除</p>",
        onOk: () => {
          this.delete(params);
        },
        onCancel: () => {
          this.$Message.info("Clicked cancel");
        }
      });
    },
    add() {
      this.$router.push("UserAdd");
    },
    edit(obj) {
      this.$router.push({
        name: "UserEdit",
        params: obj.row
      });
    },
    delete(obj) {
      this.data6.splice(obj.index, 1);
      let data = {
        id: obj.row.id,
        session: localStorage.getItem("session")
      };
      userService
        .delete(data)
        .then(data => {
          if (data && data.code == 0) {
            this.list();
          } else {
            this.$Message.error("Fail!");
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    route(name) {
      this.$router.push(name);
    },
    resetPwd(obj) {
      const that = this;
      this.$Modal.confirm({
        render: h => {
          return h("Input", {
            props: {
              autofocus: true,
              placeholder: "请输入重置的密码"
            },
            on: {
              input: val => {
                that.pwdValue = val;
              }
            }
          });
        },
        onOk() {
          const data = obj.row;
          (data.pwd = that.pwdValue),
            (data.session = localStorage.getItem("session")),
            userService
              .edit(data)
              .then(data => {
                if (data && data.code == 0) {
                  this.depts = data.data;
                }
              })
              .catch(e => {
                console.log(e);
              });
        }
      });
    },
    list() {
      let data = {
        session: localStorage.getItem("session")
      };
      userService
        .list(data)
        .then(data => {
          if (data && data.code == 0) {
            this.data6 = data.data;
          } else {
            this.$Message.error("Fail!");
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    deptList() {
      let data = {
        session: localStorage.getItem("session")
      };
      deptService
        .list(data)
        .then(data => {
          if (data && data.code == 0) {
            this.depts = data.data;
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    logout() {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>是否确认登出</p>",
        onOk: () => {
          let data = {
            session: localStorage.getItem("session")
          };
          userService
            .logout(data)
            .then(data => {
              if (data && data.code == 0) {
                localStorage.removeItem("session");
                this.$router.push("/");
              }
            })
            .catch(e => {
              console.log(e);
            });
        }
      });
    }
  },
  mounted() {
    this.list();
    this.deptList();
  }
};
</script>